@font-face {
	font-family: "Century Gothic";
	src: local("Century Gothic"), local("GOTHIC"), 
url("../mysite1/GOTHIC.woff2");
}
@font-face {
	font-family: "Segoe UI";
	src: local("Segoe UI"), local("segoeui"), 
url("../mysite1/segoeui.woff2");
}

* { 
	margin: 0;
	padding: 0;
}

	body {	
		font-size:100%; 
		color:#0f0f0e; 
		
    }

	/* HEADER TEXT */
    h1 { /* Headline 1 */
			/* font-family: "Six Caps", sans-serif;
			font-weight: 400;
			font-style: normal;
			font-size: 3.75em; */
		
		
			font-family: "Century Gothic", sans-serif; 
			font-weight: bold; 
			font-size: 3.50em; /* 60pt/16 = 3.75em */
			padding: 10px; 
		}
		h2 { /* Headline 2 */
		    /* font-family: "Tomorrow", sans-serif;
			font-weight: 600;
			font-style: italic;
			font-size: 2.5em; */
		
			/* font-family: droid-serif, cambria, serif;
			font-style: normal;
			font-size: 2.5em; */
		
		
			font-family: "Bahnschrift", sans-serif; 
			font-size: 2.5em; /* 40pt/16 = 2.5em */
			padding: 10px; 
		}
		h3 { /* Headline 3 */
			font-family: "Century Gothic", sans-serif; 
			font-size: 1.25em; /* 20pt/16 = 1.5em */
			padding: 8px;
		}
		h4 { /* Headline 4 */
			font-family: "Bahnschrift", sans-serif; 
			font-size: 1.75em; /* 28pt/16 = 1.75em */
		}
		h5 { /* Headline Special */
			font-family: "Century Gothic", sans-serif; 
			font-size: 1.25em; /* 20pt/16 = 1.25em */
			font-style: oblique; 
			color: #efe5ce;
			background-color: #a52e13; 
			text-align: center;
		}

	/* PARAGRAPH TEXT */
		p1 { /* Body text */
			font-family: "droid-serif", serif;
			font-weight: 400;
			font-style: normal;
			font-size: 1.125em;
			padding: 25px;
		
			 /*font-size: 1.125em; /* 18p/16 = 1em 
			font-family: Cambria, Georgia, serif; 
			padding: 25px; */
		}
		p2 { /* Body text small*/
			font-size: .875em; /* 14p/16 = .6875em */
			font-family: "Segoe UI", Verdana, sans-serif; 
			padding: 15px;
		}
		p3 { /* Caption text */
			font-size: .75em; /* 12pt/16 = .75em */
			font-family: "Segoe UI", Verdana, sans-serif;
			font-style: oblique; 
			padding: 25px;
		}
		p4 { /* Special text */
			font-size: 1.5em; /* 24pt/16 = 1.5em */
			font-family: "Bahnschrift", Verdana, sans-serif;
		}
		
		p5 { /* Contact info */
			font-size: 1.125em; /* 18p/16 = 1em */
			font-family: Cambria, Georgia, serif; 
		}
		p6 { /* Contact info 2 */
			font-size: .875em; /* 14p/16 = .6875em */
			font-family: "Segoe UI", Verdana, sans-serif; 
		}
    /* LINK COLORS */
        a:link {
          color: #278988;
          background-color: transparent;
          text-decoration: none;
        }

        a:visited {
          color: #a52e13;
          background-color: transparent;
          text-decoration: none;
        }

        a:hover {
          color: #41E0DE;
          background-color: transparent;
          text-decoration: underline;
        }

        a:active {
          color: #278989;
          background-color: transparent;
          text-decoration: underline;
        }

		

	/* IMAGE SCALING */		
		.responsive {
			width: 100%;
			height:auto;
			}


	/* NAVIGATION BAR */
		ul { /* changes properties of the list elements */
		  list-style-type: none;
		  margin: 0;
		  padding: 0;
		  width: 70px;	
		  background-color: #0f0f0e;
		}

		li a { /* changes properties of the text */ 
		  display: block;
		  color: #0f0f0e;
          padding-left: 1.8em;
          padding-bottom: .5em;
          text-indent: -1em;
              font-size: 1.30em;
              font-family: "Century Gothic", sans-serif; 

		}

		/* Change the link color on hover */
		li a:hover {
		  background-color: #278988;
		  color: efe5ce;
		}


		
	/* LAYOUT ELEMENTS */
		/* Style the header */
        .header {
          background-color: #f1f1f1;
          padding: 10px;
          text-align: center;
        }

        /* Style the top navigation bar */
        .topnav {
          overflow: hidden;
          background-color: #333;
        }

        /* Style the topnav links */
		.topnav a {
			float: left;
			display: block;
			color: #f2f2f2;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
			font-family: "Segoe UI", Verdana, sans-serif;

			}
			
        /* Change color on hover */
		.topnav a:hover {
			background-color: #278988;
			color: #0f0f0e;
			}

        #wrap {
            margin: 3em 8em;
        }
        .left {
            float: left;
            margin-right: 1.5em;
        }
        .right {
            float: right;
            margin-left: 1em;
        }
        p {
            margin-bottom: 2.5em;
            overflow: hidden; /* this is what keep the <p> from wrapping */
        }
        p:last-child {
            overflow: visible; /* this is an example of the browser default */
        }

        /* Custom bullet points */
            li {
              list-style-type: '⨳' ;
              padding-left: 1.8em;
              padding-bottom: .5em;
              text-indent: -1em;
              font-size: 1.30em;
              font-family: "Century Gothic", sans-serif; 
              
            }

			
        
        /* PRIMARY FORMATTING */
			/* column is side bar navigation, column middle is main content */
		.column {
			float: left;
			padding: 2px;
			width: 20%;
            
			}

		/* .column.side {
			width: 25%;
			} */
			
		.column.middle {
			width: 78%;
            border-right-style: dotted;
            border-left-style: dotted;
			}

			/* Clear floats after the columns */
		/* .row::after {
			content: "";
			display: table;
			clear: both; 
			}  */
			
		@media screen and (max-width: 700px) { /* transl: when the width of window is GREATER than [value]px, colunm + column m will equal 100% of the width of the window, as per defined % above */
			.column, .column.middle {			/* transl: when the width of window is LESS than [value]px, colunms will stack, and their width is now 100% width of window */
				width: 100%;
			}	
		}
		
		/* Image Grid */		
		.row {
			display: flex;
			flex-wrap: wrap;
			padding: 0px 2px;
		}
		
		.imgcolumn {
			flex: 20%;
			max-width: 25%;
			padding: 10px 2px;
		}
		
		.imgcolumn img {
			margin-top: 4px;
			vertical-align:middle;
			width: 100%;
            height:auto;
		}

        .imgcolumnALT {
            flex: 20%;
            max-width: 100%;
            padding: 10px 2px;
        }
        .imgcolumnALT img {
			margin-top: 4px;
			vertical-align:middle;
			width: 100%;
            height:auto;
		}
		
		@media screen and (max-width: 900px) { /*transl:   */
			.imgcolumn {
				flex: 20%;
				max-width: 25%;
			}
		}
		
		@media screen and (maxwidth: 700px) {
			.imgcolumn {
				flex: 100%;
				max-width: 100%;
			}
				
		}